<template>
   <div :class="['s-progress', { mr: showText }]">
      <div class="container" :style="{ width }">
         <div
            :class="type"
            :style="{ width: `${val}%`, height: `${height}px` }"
         ></div>
      </div>
      <span
         v-if="showText && position === 'inner'"
         class="text"
         :style="{ left: `${val}%` }"
      >
         {{ `${val}%` }}
      </span>
      <span v-if="showText && position === 'right'" class="right_text">
         {{ `${val}%` }}
      </span>
   </div>
</template>

<script lang="ts" setup>
import { watch } from "vue"
   interface Props {
      type?: "loading" | "step" | "error";
      width?: string;
      val?: number | string;
      showText?: boolean;
      height?: number; // 进度条高度
      position: "right" | "inner"; // 文本显示位置
   }
const props = withDefaults(defineProps<Props>(), {
  type: "loading",
  width: "100%",
  val: 50,
  showText: false,
  height: 2,
  position: "inner"
})

watch(
  () => props.type,
  () => {
    console.log(props)
  }
)
</script>

<style scoped lang="less">
   .s-progress {
      position: relative;
      &.mr {
         margin-right: 42px;
      }
      .container {
         margin: 10px 0;
         overflow: hidden;
         background-color: rgba(0, 0, 0, 0.2);
         .loading {
            background: @primary;
            animation: loading 2s infinite;
         }
         .error {
            background: @danger;
         }
         .step {
            background: @primary;
            transition: width 2s;
         }
      }
      .text {
         position: absolute;
         color: @primary;
         margin-left: 8px;
         top: -4px;
         background-color: @white;
         transition: left 2s;
      }
      .right_text {
         position: absolute;
         color: @primary;
         top: -2px;
         transition: left 2s;
         right: -54px;
      }
   }

   @keyframes loading {
      0% {
         transform: translateX(-100%);
      }
      100% {
         transform: translateX(200%);
      }
   }
</style>
